import React, { Component } from 'react'
import { Card, Spin, Alert, Switch, Icon } from 'antd'
import './index.less'

class Loading extends Component {
    state = {
        loading: false
    }
    toggle =(value) => {
        console.log(value)
        this.setState({
            loading: value
        })
    }
    render() {
        const icon = <Icon type="loading"/>
        return (
            <div>
                <Card title="Loading组件" className="card-wrap">
                    <Spin size="small"/>
                    <Spin/>
                    <Spin size="large"/>
                </Card>
                <Card title="自定义描述方案" className="card-wrap">
                    <Spin tip="加载中...">
                        <Alert
                            message="这是一个警告信息"
                            description="火警，公安，武警，特警正在赶来的路上"
                            type="info"
                        />
                    </Spin>
                </Card>
                <Card title="开关控制加载" className="card-wrap">
                    <Spin spinning = {this.state.loading} tip="加载中...">
                        <Alert
                            message="这是一个警告信息"
                            description="火警，公安，武警，特警正在赶来的路上"
                            type="info"
                        />
                    </Spin>
                    <div>
                        <Switch checked={this.state.loading} onChange={this.toggle}/>
                    </div>
                </Card>
                <Card title="自定义图标" className="card-wrap">
                    <Spin indicator = {icon} >
                    </Spin>
                </Card>
            </div>
        )
    }
}
export default Loading